<template>
  <div
    id="kChart"
    ref="kChart"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const kChart = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});
// 线性表的配置项
const option = ref<EChartsOption>({
  xAxis: {
    data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
  },
  yAxis: {},
  series: [
    {
      type: "candlestick",
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(kChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
